<template>
	<div class="background-container">
	
	
	<view class="load-main">
		<view class="load-box">
			<view class="load-text">
			    zhiwang
			</view>
			<view class="load-input">
				<input type="text" placeholder-class="load-place" placeholder="请输入账号" :v-model="account" />
			</view>
			<view class="load-input">
				<input type="text" placeholder-class="load-place" placeholder="请输入密码" :v-model="password" />
			</view>
			<div class="btns">
			    <button class="loginbtn">忘记密码</button>
			    <button class="registrbtn">注册账号</button>
			</div>
			<div class="btns-container"> 
			<div class="btns-container button"> 
				<button class="load-button-style" type="default">登录</button>
			</div>
			
			</div>
			
			

		</view>
	</view>
	</div>
</template>
<script>
	import { md5 } from './js-md5/src/md5.js';
	let txt=md5('admin',32)
	console.log(txt)
	export default{
		data(){
			return{
				account:'',
				password:'',
				showBox:1,
				user:{
					account:'',
					password:'',
					name:''
				}
				
			}
		},
		methods:{
			async login(){
				let ret = await uni.$post('login',{
					account:this.loginId,
					password:this.password,
					  // "account": "string",
					  // "password": "string",
					  // "phone": "string",
					  // "verificationCode": "string"
				})
				console.log(ret)
				// let account = md5(md5(this.account,32).split('').reverse().join('',),32)
				// let ret = awaite uni.$post('login',{
				// 	account:this.loginId
				// 	password:
				
			}
		}
	}
</script>

<!-- <script>
// import { toLogin } from '@/api/request'; // 取消注释以使用登录函数
import md5 from 'js-md5';

export default {
  data() {
    return {
      form: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur', validator: this.validateId }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur', validator: this.checkpwd }
        ]
      },
      loginLoading: false
    };
  },
  methods: {
    validateId(rule, value, callback) {
      const reg = /^[a-zA-Z_\-0-9]+$/;
      if (!value) {
        callback(new Error('请输入用户名'));
      } else if (!reg.test(value)) {
        callback(new Error('用户名由数字、字母、下划线、中划线组成'));
      } else {
        callback();
      }
    },
    checkpwd(rule, value, callback) {
      if (!value) {
        callback(new Error('请输入密码'));
      } else if (value.length < 6) {
        callback(new Error('密码不少于6位'));
      } else {
        callback();
      }
    },
    onSubmit() {
      const loginParam = {
        account: this.form.account,
        password: md5(this.form.password).toUpperCase()
      };
      this.loginLoading = true;
      toLogin(loginParam).then(data => {
        this.$message({
          message: '登录成功',
          type: 'success',
          duration: 2000
        });
        this.loginLoading = false;
      }).catch(() => {
        this.loginLoading = false;
        this.$message.error('登录失败，请重试');
      });
    }
  }
};
</script> -->

<style>
.load-main {
		display: flex;
		justify-content: center;
		/* background-color: aliceblue; */

	}

.load-box {
		display: flex;
		width: 90%;
		height: 250px;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	    /* text-align: center; */
		/* background-color: azure; */

	}
	.load-text{
		display: flex;
		align-items: center;
		line-height:40px ;
		font-size: 25px;
		 color: #ffffff;
	
		
	}

	.load-input {
		display: flex;
		border: 1px solid #cccccc;
		height: 20px ;
		align-items: center;
		padding: 8px; /* 根据需要调整内边距 */
	    border-radius: 20px;
		gap: 20px;
	}
	.load-place{
		padding-left: 10px;
		font-size:15px;
		}

	.btns {
		    display: flex;
		    justify-content: space-between; /* 修改这里 */
		    width: 100%; /* 确保容器宽度为100% */
			margin-top: 20px;
			gap: 20px;
		}
		    .loginbtn {
		        border: 1px solid #ffaaff;
		        padding: 2px 8px;
		        border-radius: 4px;
		        color: #ffaaff;
				font-size:10px;
		    }
		
		    .registrbtn {
		        border: 1px solid #ffaaff;
		        padding: 2px 8px;
		        border-radius: 4px;
		        color: #ffaaff;
				font-size:10px;
		    }
		
		.btns-container { /* 新增容器的样式 */
			display: flex;
			flex-direction: column; /* 设置为列方向，使按钮垂直排列 */
			align-items: center; /* 使按钮在容器中垂直居中 */
			width: 100%; /* 确保容器宽度为100% */
			
			}
			.btns-container button {
			    padding: 2px 100px; /* 设置按钮内边距，使按钮具有合适的宽度 */
			    font-size: 16px; /* 设置字体大小 */
			    cursor: pointer; /* 设置鼠标悬停时的样式 */
			/* 	}
			/* 假设您有一个名为.background-container的类，用于包含背景图片 */
		/* .background-container {
			  
			  background-image: url('file:///C:/Users/胡璐璐/Documents/HBuilderProjects/login/pages/index/0074Sbbygy1hv7qob1oyjj30om1hc78k.jpg'); /* 替换为您的图片路径 */
			  
			  
			/*  background-size: cover; /* 或者使用'contain'、'auto'等其他值 */
			  
			  
			 /* background-position: center; *//* 或者使用'top'、'bottom'、'left'、'right'等值，或者指定具体的像素位置 */
			  
			 /* 
			  background-repeat: no-repeat; 

			} */

}

</style>